import React, { Component } from 'react';
import * as echarts from 'echarts';
import '../../../../assets/styles/shouye.css'
class Daiban extends Component {
    render() {
        return (
            <div>
                <div id='daiban'></div>
            </div>
        );
    }
    componentDidMount() {
        var chartDom = document.getElementById('daiban');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'item'
            },
        
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['90%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: '已处理98'},
                        { value: 735, name: '已处理68' },
                        { value: 580, name: '已处理30' },
                        { value: 484, name: '已处理70' },
                        { value: 300, name: '已处理90' }
                    ]
                }
            ]
        };
        option && myChart.setOption(option);
    }

}

export default Daiban;
